<template>
  <div class="message-item" :class="{ unread: !data.isRead }" @click="$emit('click', data)">
    <div class="message-avatar">
      <img v-if="data.sender.avatar" :src="data.sender.avatar" :alt="data.sender.name" />
      <van-icon v-else :name="getTypeIcon(data.type)" size="24" />
      <div v-if="!data.isRead" class="unread-dot"></div>
    </div>
    <div class="message-content">
      <div class="message-header">
        <span class="message-title">{{ getMessageTitle(data) }}</span>
        <span class="message-time">{{ formatMessageTime(data.createTime) }}</span>
      </div>
      <div class="message-body">{{ data.content }}</div>
    </div>
  </div>
</template>

<script setup>
import { formatDate } from '../../utils/common'

const props = defineProps({
  data: {
    type: Object,
    required: true
  }
})

defineEmits(['click'])

// 获取消息类型图标
const getTypeIcon = (type) => {
  const iconMap = {
    system: 'info-o',
    comment: 'chat-o',
    like: 'like-o',
    follow: 'friends-o',
    notice: 'volume-o'
  }
  
  return iconMap[type] || 'info-o'
}

// 获取消息标题
const getMessageTitle = (message) => {
  if (message.title) return message.title
  
  const titleMap = {
    system: '系统通知',
    comment: `${message.sender.name} 评论了你`,
    like: `${message.sender.name} 点赞了你`,
    follow: `${message.sender.name} 关注了你`,
    notice: '公告'
  }
  
  return titleMap[message.type] || '通知'
}

// 格式化消息时间
const formatMessageTime = (time) => {
  const now = new Date()
  const messageTime = new Date(time)
  const diffMs = now - messageTime
  
  // 一分钟内
  if (diffMs < 60 * 1000) {
    return '刚刚'
  }
  
  // 一小时内
  if (diffMs < 60 * 60 * 1000) {
    return `${Math.floor(diffMs / (60 * 1000))}分钟前`
  }
  
  // 一天内
  if (diffMs < 24 * 60 * 60 * 1000) {
    return `${Math.floor(diffMs / (60 * 60 * 1000))}小时前`
  }
  
  // 一周内
  if (diffMs < 7 * 24 * 60 * 60 * 1000) {
    return `${Math.floor(diffMs / (24 * 60 * 60 * 1000))}天前`
  }
  
  // 超过一周
  return formatDate(time, 'MM-DD')
}
</script>

<style lang="scss" scoped>
.message-item {
  display: flex;
  padding: 12px 16px;
  background-color: var(--background-color-light);
  border-bottom: 1px solid var(--border-color-light);
  
  &.unread {
    background-color: rgba(var(--primary-color-rgb), 0.05);
  }
  
  .message-avatar {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 12px;
    flex-shrink: 0;
    background-color: var(--background-color);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary-color);
    
    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      object-fit: cover;
    }
    
    .unread-dot {
      position: absolute;
      top: 0;
      right: 0;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background-color: var(--danger-color);
    }
  }
  
  .message-content {
    flex: 1;
    overflow: hidden;
    
    .message-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 4px;
      
      .message-title {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-color);
      }
      
      .message-time {
        font-size: 12px;
        color: var(--text-color-tertiary);
      }
    }
    
    .message-body {
      font-size: 13px;
      color: var(--text-color-secondary);
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
  }
}
</style> 